<template>
  <item-add text="添加人员" @addClick="addShow"></item-add>

  <div class="show-table">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="优秀毕业生" name="student">
      </el-tab-pane>
      <el-tab-pane label="优秀教师" name="teacher">
      </el-tab-pane>
    </el-tabs>
    <el-table
        :data="tableData"
        stripe
        style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <p>{{ props.row.info }}</p>
        </template>
      </el-table-column>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="name" :label="tableTitle.name" align="center"></el-table-column>
      <el-table-column prop="goDetail" :label="tableTitle.goDetail" align="center"></el-table-column>
      <el-table-column prop="now" :label="tableTitle.now" align="center"></el-table-column>
      <el-table-column prop="time" :label="tableTitle.time" align="center"></el-table-column>
      <el-table-column prop="time" label="个人图片" align="center">
        <template #default="props">
          <img :src="props.row.image" alt="" style="width: 120px;height: 120px">
        </template>
      </el-table-column>
      <el-table-column prop="time" label="操作" align="center">
        <template #default="props">
          <el-button type="success" size="mini" @click="editData(props.row)" plain>修改</el-button>
          <el-button type="danger" size="mini" @click="deleteData(props.row.id)" plain>删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="fenye utils-flex-Justcenter">
      <el-pagination
          background
          layout="prev, pager, next"
          @current-change="pageinationChange"
          page-size="5"
          :total="total">
      </el-pagination>
    </div>
  </div>


  <div class="add-edit">
    <el-drawer
        :title="title"
        v-model="drawer"
        direction="rtl"
        :destroy-on-close="false">
      <!--      <span>我来啦!</span>-->
      <el-form :model="personFrom" label-width="100px" class="demo-ruleForm">
        <el-form-item label="添加类型">
          <el-radio-group v-model="personFrom.type" @change="changePerson" :disabled="id!==null">
            <el-radio label="student" >优秀毕业生</el-radio>
            <el-radio label="teacher" >优秀教师</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="personTitle.name">
          <el-input v-model="personFrom.name"></el-input>
        </el-form-item>
        <el-form-item :label="personTitle.time">
          <el-input v-model="personFrom.time"></el-input>
        </el-form-item>
        <el-form-item :label="personTitle.goDetail" prop="">
          <el-input v-model="personFrom.goDetail"></el-input>
        </el-form-item>
        <el-form-item :label="personTitle.now" prop="">
          <el-input v-model="personFrom.now"></el-input>
        </el-form-item>
        <el-form-item :label="personTitle.info" prop="">
          <el-input v-model="personFrom.info" type="textarea" :input-style="textStyle"></el-input>
        </el-form-item>
        <el-form-item label="个人图片" prop="">
<!--          <el-input v-model="personFrom.image" type="textarea" :input-style="textStyle"></el-input>-->
          <img-update :url="personFrom.image" @successUpdate="success_"></img-update>
        </el-form-item>
        <el-form-item label="" prop="">
          <el-button type="primary" @click="addPerson">{{ title }}</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {inject, onMounted, reactive, toRefs, ref, unref} from "vue";
import {ElMessage} from 'element-plus';
import {ElMessageBox} from 'element-plus';

import itemAdd from "../../components/itemAdd.vue";
import {title_} from "./add/query"

export default {
  name: "",
  components: {
    itemAdd
  },
  setup() {
    const data = reactive({
      title: "添加人員",
      drawer: false,
      personFrom: {
        name: "",
        now: "",
        goDetail: "",
        time: "",
        info: "",
        image: "",
        type: "student"
      },
      personTitle: {},
      tableTitle: {},
      activeName: 'student',
      textStyle: {
        height: "120px"
      },
      queryInfo: { // 查询参数
        page: 1,
        limit: 5,
        type: "student"
      },
      tableData: [],
      type: "student",
      id: null,
      total: 0,


    })
    const rules = {
      name: [
        {required: true, message: "姓名不能为空", trigger: "blur"},
      ],
    }
    const $http = inject("$http")

    onMounted(async () => {
      data.personTitle = JSON.parse(JSON.stringify(title_.student))
      data.tableTitle = JSON.parse(JSON.stringify(title_.student))
      queryData()
    })

    const addPerson = async () => {
      let res = null;
      if (data.id == null)
        res = await $http.unityInfo.createCultivate(data.personFrom)
      else
        res = await $http.unityInfo.editCultivate(data.id, data.personFrom)
      data.id = null
      ElMessage.success(res.msg)
      queryData();
      data.drawer = false
    }

    const changePerson = (eve) => {
      data.personTitle = title_[eve]
      data.personFrom.type = eve

    }

    const handleClick = (tab, event) => {
      data.type = tab.props.name
      data.tableTitle = title_[tab.props.name]
      data.queryInfo.page = 1
      queryData()
    }

    const queryData = async () => {
      data.queryInfo.type = data.type
      const res = await $http.unityInfo.cultivateList(data.queryInfo)
      data.tableData = res.result.result
      data.total = res.result.count
      console.log(res)
    }

    const deleteData = (id) => {
      ElMessageBox.confirm('此操作将永久删除该人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await $http.unityInfo.deleteCultivate(id)
        ElMessage.success(res.msg);
        queryData()
      }).catch(() => {
        ElMessage.info({
          message: '已取消删除'
        });
      });
    }

    const editData = (row) => {
      data.id = row.id;
      const {
        name,
        now,
        goDetail,
        time,
        info,
        image,
        type
      } = row
      data.personFrom = {
        name,
        now,
        goDetail,
        time,
        info,
        image,
        type
      }
      data.activeName = data.type
      data.drawer = true
      data.title = "修改人员"
      console.log(data.id)
    }
    const addShow = () => {
      data.drawer = true
      data.id = null
      data.title = "添加人员"
      for (let key in data.personFrom) {
        console.log(data.activeName)
        data.personFrom[key] = ""
      }

    }
    const pageinationChange = (val) => {
      data.queryInfo.type = data.type
      data.queryInfo.page = val
      queryData()
    }

    const success_ = (val) => {
      data.personFrom.image = val
    }
    return {
      ...toRefs(data),
      rules,
      changePerson,
      addPerson,
      handleClick,
      deleteData,
      editData,
      addShow,
      pageinationChange,
      success_
    }
  }
}
</script>

<style scoped lang="less">
.add-edit {
  /deep/ .el-drawer {
    //padding: 0 20px;
    width: 35%;
    box-sizing: border-box;
  }
}
.fenye {
  margin-top: 20px;
}

/deep/ .el-drawer__header {
  margin-bottom: 5px;
}
/deep/ .el-drawer__body {
  overflow: auto;
}
</style>